<template>
  <div class="mySetting">
    <div class="card" style="padding: 17px 0;">
      <a-tabs v-model="tabkey" tab-position="left" @change="tabchange">

        <a-tab-pane key="1" tab="站点名称">
          <div class="right_main">
            <div class="title">
              站点名称
            </div>
            <div class="m_b_10 m_t_10">
              <a-space>
                <span class="titles">当前名称:</span>
                <span class="titles" style="text-align: left"> {{ name }} </span>
              </a-space>
            </div>
            <div class="m_b_10">
              <a-space>
                <span class="titles">新名称：</span>
                <a-input v-model="new_name" placeholder="请输入站点新名称" style="width:200px"/>
              </a-space>
            </div>
            <div class="m_b_10">
              <a-space>
                <span class="titles">登录密码：</span>
                <a-input v-model="password " placeholder="请输入登录密码以便校验" style="width:200px"/>
              </a-space>
            </div>
            <div class="m_b_10">
              <a-space>
                <span class="titles"></span>
                <a-button type="primary" @click="doUpdateSiteInfo">确认设置</a-button>
              </a-space>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="站点密码">
          <div class="right_main">
            <div class="title">
              站点密码
            </div>
            <div class="m_b_10 m_t_10">
              <a-space>
                <span class="titles">原密码：</span>
                <a-input v-model="password2" placeholder="请输入旧密码" style="width:200px"/>
              </a-space>
            </div>
            <div class="m_b_10">
              <a-space>
                <span class="titles">新密码：</span>
                <a-input v-model="new_pass" placeholder="请输入新密码" style="width:200px"/>
              </a-space>
            </div>
            <div class="m_b_10">
              <a-space>
                <span class="titles"></span>
                <a-button type="primary" @click="doUpdateSitePass">确认设置</a-button>
              </a-space>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
  import { doUpdateSiteInfo, doUpdateSitePass } from '@/api/admin/site'
  import { getInfo } from '@/api/loginApi'
  import storage from 'store'

  export default {
    name: 'MySetting',
    data () {
      return {

        tabkey: '1',
        new_name: '',
        password: '',
        password2: '',
        new_pass: '',
        name: ''
      }
    },
    computed: {},
    created () {
      this.name = JSON.parse(localStorage.getItem('userinfo')).bra_name
    },
    mounted () {

    },
    methods: {
      doUpdateSiteInfo () {
        if (this.new_name !== '' && this.password !== '') {
          doUpdateSiteInfo({
            new_name: this.new_name,
            password: this.password
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              getInfo().then(res => {
                if (res.code === 200) {
                  storage.set('userinfo', res.data, 7 * 24 * 60 * 60 * 1000)
                  this.name = JSON.parse(localStorage.getItem('userinfo')).bra_name
                  this.$message.success('修改成功!')
                }
              })
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请检查所填条件!')
        }
      },
      doUpdateSitePass () {
        if (this.password2 !== '' && this.new_pass !== '') {
          doUpdateSitePass({
            password: this.password2,
            new_pass: this.new_pass
          }).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
            } else {
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          this.$message.info('请检查所填条件!')
        }
      },
      tabchange (key) {
        console.log(key)
      }
    }
  }
</script>
<style lang='less' scoped>
  .mySetting {
    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-btn {
      border-radius: 4px;
    }

    /deep/ .ant-tabs-tab {
      width: 196px;
      height: 38px;
      text-align: left;
      color: #101010;

    }

    /deep/ .ant-tabs-tab-active {
      background-color: #DBEEFE;
      color: #2396F9;
    }

    .right_main {
      height: 100vh;
    }

    .title {
      font-size: 20px;
      color: #101010;
    }

    .titles {
      display: inline-block;
      min-width: 72px;
      font-size: 14px;
      color: #101010;
      text-align: right;

    }
  }
</style>
